<template>
	<view class="app-container">
		<view class="header-bar-white tabbar">
			<view class="tabs-wrap">
				<view class="tab" v-for="(status, tabIndex) in statusArray" :class="{'selected':tabIndex==statusIndex}" @click="bindStatusChange(tabIndex)">
					<view class="text">{{status}}</view>
					<view class="count">{{countArray[tabIndex]}}</view>
				</view>
			</view>
		</view>
		<view class="search-wrap">
			<view class="input-box">
				<input v-model="queryParams.name" placeholder="请输入姓名"/>
				<view class="button-primary button" style="display: flex; align-items: center;" @click="query">
					<uni-icons type="search" size="16" color="#FFFFFF"></uni-icons>查询
				</view>
			</view>
			<!-- <view class="title">共 <text class="emphasize">{{total}}</text> 条</view> -->
		</view>
		<view v-if="list.length > 0">
			<view class="list">
				<view class="item" v-for="item in list" @click="view(item)">
					<view class="">
						<view class="title">
							<view class="name">{{item.name}}</view>
							<view class="idnumber">{{item.idNumber}}</view>
						</view>
						<view class="label">{{item.regionName?item.regionName:''}}</view>
					</view>
					<view :class="{'uncheck':statusIndex==2}">{{item.checkResult?item.checkResult:'未提交'}}</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-if="list.length == 0">
			<uni-icons custom-prefix="iconfont" type="icon-no-data" size="32" color="#999999"></uni-icons>
			<text class="text">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import { ApiOrgan } from "@/api/system/index.js";
	import { ApiIdentifySchedulePerson } from "@/api/identify/index.js";
	
	export default {
		data() {
			return {
				user: {},
				status: '未提交',
				statusIndex: 0,
				statusArray: ['未提交', '未审核', '审核不过', '审核通过', '注销资格'],
				countArray: [0, 0, 0, 0, 0],
				queryParams: {
					scheduleId: null,
					manageDeptId: null,
					name: null,
					areaCode: undefined,
					streetCode: undefined,
					villageCode: undefined,
					checkStatus: undefined,
					checkResult: undefined,
					status: '1',
					byDesc: 'id',
					likeColumns: 'name',
					pageNum: 1,
					pageSize: 20,
					clause: {
						checkResult: ['null']	//默认：未提交
					}
				},
				list: [],
				total: 0,
				pages: 0
			};
		},
		created() {
			this.user = this.$store.getUser();
			this.queryParams.manageDeptId = this.user.manageDeptId;
			//行政区划
			this.getRegion();
		},
		onLoad(option) {
			this.queryParams.scheduleId = option.scheduleId;
		},
		onShow() {
			if(uni.getStorageSync('person-check-status-change')){
				this.query();
				uni.removeStorageSync('person-check-status-change');
			}
		},
		onReachBottom() {
			this.loadMore();
		},
		methods: {
			
			bindStatusChange(tabIndex){
				this.statusIndex = tabIndex;
				if(tabIndex == 0){
					//认证：未提交
					delete this.queryParams.checkResult;
					this.queryParams.clause.checkResult = ['null'];
				} else {
					this.queryParams.checkResult = this.statusArray[tabIndex];
					delete this.queryParams.clause.checkResult;
				}
				this.query();
			},
			
			//行政区划
			getRegion(){
				ApiOrgan.getInfo(this.user.deptId).then(res=>{
					let vaild = false;
					let regionCode = res.data.deptCode;
					if(regionCode && regionCode != ''){
						if(regionCode.length == 6){
							//县区
							this.queryParams.areaCode = regionCode;
							vaild = true;
						} else if(regionCode.length == 9){
							//街道乡镇
							this.queryParams.streetCode = regionCode;
							vaild = true;
						} else if(regionCode.length == 12){
							//村居委会
							this.queryParams.villageCode = regionCode;
							vaild = true;
						}
					}
					if(vaild){
						this.getList();
						this.getCount();
					} else {
						uni.showToast({
							title: '未知行政区域'
						})
					}
				})
			},
			
			getCount(){
				let data = {};
				for(let a in this.queryParams){
					if(a != 'clause' && a != 'checkResult'){
						data[a] = this.queryParams[a];
					}
				}
				ApiIdentifySchedulePerson.groupCount(data).then(res=>{
					this.countArray.forEach((item,index)=>{
						if(res.data[this.statusArray[index]]){
							this.countArray[index] = res.data[this.statusArray[index]];
						}
					})
				});
			},
			
			query(){
				this.list = [];
				this.queryParams.pageNum = 1;
				this.getList();
			},
			
			getList(){
				ApiIdentifySchedulePerson.queryList(this.queryParams).then(res=>{
					this.list.push(...res.data.records);
					this.total = res.data.total;
					this.pages = res.data.pages;
				})
			},
			
			loadMore(){
				if(this.queryParams.pageNum >= this.pages)return;
				this.queryParams.pageNum = this.queryParams.pageNum+1;
				this.getList();
			},
			
			view(row){
				let that = this;
				if(this.statusIndex == 0){
					if(this.user.userName=='gq_test'){
						//微信认证：先检查是否认证过
						that.getSchedulePerson(row);
					} else {
						//认证服务选择
						let config = this.$store.getAreaConfig();
						if(!config || !config.recognitionProvider || config.recognitionProvider=='' || config.recognitionProvider == 'weixin'){
							//微信认证：先检查是否认证过 
							that.getSchedulePerson(row);
						} else {
							uni.navigateTo({
								url: '/pages/identify/index?scheduleId='+this.queryParams.scheduleId+'&id='+row.id+'&personId='+row.personId+'&name='+row.name+'&idNumber='+row.idNumber
							})
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/identify/info?scheduleId='+this.queryParams.scheduleId+'&id='+row.id+'&personId='+row.personId+'&name='+row.name+'&idNumber='+row.idNumber
					})
				}
				
			},
			
			//查询按排名单认证记录
			getSchedulePerson(row){
				ApiIdentifySchedulePerson.list({
					scheduleId: this.queryParams.scheduleId,
					personId: row.personId
				}).then(res=>{
					let schedulePerson = res.data[0];
					let operable = true;
					res.data.forEach(item=>{
						//是否可操作：认证成功或审批通过（不可操作），其它可（重复）操作
						if(item.identifyResult == '0' || item.checkStatus=='通过'){
							operable = false;
						} else {
							operable = true;
						}
					})
					//最多提交次数
					let config = this.$store.getAreaConfig();
					if(res.data[0].submitTimes>config.maxRecognitionTimes){
						operable = false;
						uni.showModal({
							title: '超限提醒',
							content: row.name+'已提交多次认证，请等待审核即可。'
						})
					}
					
					if(operable){
						this.wxRecognition(row);
					} else {
						uni.showModal({
							title:'提示',
							content: row.name+'已认证，请在首页认证查询中查看审核结果'
						})
					}
				})
			},
			
			//打开微信人脸认证
			wxRecognition(row){
				let that = this;
				wx.startFacialRecognitionVerify({
					name: row.name,
					idCardNumber: row.idNumber,
					complete(res){
						// console.log(3333);
						// console.log(res);
						if(res.errCode === 0){
							let data = {
								verifyResult: res.verifyResult,
								personId: row.personId,
								scheduleId: that.queryParams.scheduleId										
							};
							ApiIdentifySchedulePerson.identifyVerify(data).then(response=>{
								if(response.code == 200){
									uni.showModal({
										title:'认证结果',
										content: '认证通过',
										complete() {
											uni.navigateBack();
										}
									})
								}
							});
						} else {
							uni.showToast({
								title: res.errMsg
							})
						}
					},
				});
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	.tabbar{
		width: 100%;
		overflow-x: scroll;
		padding: 30upx !important;
		.tabs-wrap{
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-sizing: border-box;
			.tab{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 15upx 20upx;
				flex-wrap: nowrap;
				background-color: #dcdcdc;
				.text{
					margin-bottom: 10upx;
					flex-wrap: nowrap;
					word-wrap: normal;
					white-space: nowrap;
					font-weight: bold;
				}
				.count{
					padding: 3upx 20upx;
					border-radius: 25upx;
					background-color: white;
					color: red;
				}
			}
			.selected{
				color: white;
				background-color: #FF7B00;
			}
			:first-child {
				border-top-left-radius: 20upx;
				border-bottom-left-radius: 20upx;
			}
			:last-child{
				border-top-right-radius: 20upx;
				border-bottom-right-radius: 20upx;
			}
		}
	}
	
	
	.list{
		width: 100%;
		margin-top: 19upx;
	}
	.list .item{
		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 30upx;
		box-sizing: border-box;
		background-color: #ffffff;
		margin-top: 1upx;
	}
	.list .item .title{
		display: flex;
		align-items: center;
		font-weight: bold;
	}
	.list .item .title .name{
		width: 100upx;
	}
	.list .item .label{
		color: #666666;
		margin-top: 10upx;
	}
	.list .item .uncheck{
		color: #FF7B00;
	}
	.search-wrap{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30upx 30upx;
		padding-bottom: 20upx;
		box-sizing: border-box;
	}
	.search-wrap .input-box{
		height: 43upx;
		display: flex;
		align-items: center;
		flex-grow: 2;
		border: 1upx solid #dcdcdc;
		border-radius: 30upx;
		padding: 10upx 0upx;
	}
	.select-box{
		display: flex;
		align-items: center;
		padding: 0 15upx;
		border-right: 1upx solid #dcdcdc;
	}
	.select-box .text{
		width:120upx;
	}
	.search-wrap .input-box input{
		flex-grow: 2;
		margin-left: 10upx;
		text-indent: 10upx;
	}
	.search-wrap .button{
		height: 43upx;
		padding: 10upx 20upx;
		border-radius: 30upx;
		margin-left: 10upx;
	}
	.emphasize{
		color: #FF7B00;
	}
</style>
